<template>

    <Cascader class="mr-10"
              placeholder="请选择地区"
              v-model="valueArray"
              :data="newSbType"
              :load-data="loadData"
              change-on-select
              @on-change="changeData"
              ref="click"
              trigger="hover"
              @on-visible-change='open'>
    </Cascader>

</template>

<script>
import cityFormApi from '@/api/base_sys/gcDispenser.js'
import moment from 'moment'
import { Message } from 'iview'
import { mapActions } from 'vuex'
export default {
	props: ['massage', 'address'],
	name: 'cityForm',
	data() {
		return {
			value: true,
			indeterminate: false,
			checkAll: false,
			newSbType: [
				// {
				// 	value: '330000',
				// 	label: '浙江省',
				// 	children: [
				// 		{
				// 			value: '330100',
				// 			label: '杭州市',
				// 			children: [
				// 				{
				// 					value: '330110',
				// 					label: '余杭区',
				// 					children: [
				// 						{
				// 							value: '3262',
				// 							label: '南苑街道',
				// 							children: [
				// 								{
				// 									value: '3760',
				// 									label: '时代社区',
				// 									children: [
				// 										{
				// 											value: '6328',
				// 											label: '君临天下'
				// 										}
				// 									]
				// 								}
				// 							]
				// 						}
				// 					]
				// 				}
				// 			]
				// 		}
				// 	]
				// }
				// {
				// 	value: '330000',
				// 	label: '浙江省',
				// 	parentid: 1,
				// 	children: [
				// 		{
				// 			value: '330100',
				// 			label: '杭州市',
				// 			parentid: '330000',
				// 			children: [
				// 				{
				// 					value: '330110',
				// 					label: '萧山区',
				// 					parentid: '330100',
				// 					children: [
				// 						{
				// 							value: '3262',
				// 							label: '宁围',
				// 							parentid: '330110',
				// 							children: [
				// 								{
				// 									value: '3760',
				// 									label: '市心社区',
				// 									parentid: '3262',
				// 									children: [
				// 										{
				// 											value: '6328',
				// 											label: '华瑞中心',
				// 											parentid: '3760'
				// 										}
				// 									]
				// 								}
				// 							]
				// 						}
				// 					]
				// 				}
				// 			]
				// 		}
				// 	]
				// }
			],
            
			valueArray: [],
			// valueArray: ['330000','330100','330110','3262','3760','6328'],
            // valueArray: ['330000','330100','330110','3262','3760','6328'],
			newObject: {
				provid: '',
				cityid: '',
				distid: '',
				strtid: '',
				commid: '',
				comminid: ''
			},
			b: 0,
			defArea: '',
			selectedData: '',
			// 弹出层数据
			modal: {
				cityForm: {
					type: 'create', // create 新建，update 修改
					title: '新建',
					formData: {}
				}
			}
		}
	},
	// 监听address是否变化,变化重新加载数据
	watch: {
		address(newValue, oldValue) {
			if (newValue) {
				this.newSbType.push(this.address)
				this.valueArray.push(this.address.value)
				console.log(
					this.newSbType,
					this.valueArray,
					'addressaddressaddressaddressaddressaddress'
				)
			}
		}
	},
	methods: {
		...mapActions([
			// 'handleLogin',
			// 'getUserInfo',
			'reArea'
		]),
		// 城市级联
		getProvince(data) {
			cityFormApi.getDown(data).then(res => {
				let that = this
				let province = res.data
				for (let i = 0; i < province.length; i++) {
					let wzpz = province[i]
					wzpz.value = wzpz.id
					// wzpz.value = wzpz.name

					wzpz.label = wzpz.name
					wzpz.loading = false
					wzpz.children = []
					that.newSbType.push(wzpz)
					console.log(that.newSbType, 'that.newSbType')
				}
			})
		},

		loadData(item, callback) {
			item.loading = true
			cityFormApi.getDown(item.id).then(res => {
				if (res.data == '') {
					let wzpz = {}
					wzpz.value = ''
					wzpz.label = '当前暂无数据'
					// wzpz.disabled = true ;
					wzpz.loading = false
					// item.children.push(wzpz);
				} else {
					for (let city of res.data) {
						let wzpz = city
						cityFormApi.getDown(wzpz.id).then(rs => {
							if (rs.data != '') {
								wzpz.value = wzpz.id
								wzpz.label = wzpz.name
								wzpz.loading = false
								wzpz.children = []
							} else {
								wzpz.value = wzpz.id
								wzpz.label = wzpz.name
							}
						})

						item.children.push(wzpz)
						console.log(item.children, 'item.children')
					}

					item.loading = false
					callback()
				}
			})
		},
        arrayToTree (arr) {
            const map = {};
            const result = [];

            for (const item of arr) {
                map[item.value] = item;
            }

            for (const item of arr) {
                const parent = map[item.parentid];

                if (parent) {
                    if (!parent.children) {
                        parent.children = [];
                    }
                    parent.children.push(item);
                } else {
                    result.push(item);
                }
            }

            return result;
        },
        // 需求：点击修改按钮时,需要将地址回显,可以实现,就是让后端添加两个字段接收,一个是选择地址后的递归数组arrayToTreeData,一个是value值,但是改过之后需要添加的时候就这么做，没有这么做，所以这个方法没有用到，可以参考，目前是直接获取社区id 匹配小区
		changeData(value, selectedData) {
			console.log(selectedData, 'selectedData')
            // var arrayToTreeData = this.arrayToTree(selectedData)
            // console.log(arrayToTreeData, 'arrayToTreeData')
			let area = this.defArea
			var o = 0
			for (var i in this.newObject) {
				if (o < area[7]) {
					this.newObject[i] = area[o]
				} else {
					this.newObject[i] = value[this.b]
					this.b++
				}
				o++
			}
			this.b = 0
			this.$emit('ProvinceData', this.newObject)
			console.log(this.newObject, '11111111111111111111')
		},
		open(Boolean) {
			const that = this
			// that.newSbType = []
			if (Boolean == true) {
				this.getProvince(this.defArea[6])
			}
		},

		//分割字符串
		getCookie() {
			var strcookie = document.cookie // 获取cookie字符串
			var arrcookie = strcookie.split(';') // 分割

			// 遍历匹配
			for (var i = 0; i < arrcookie.length; i++) {
				let arr = arrcookie[i].split('=')
				if (arr[0] == ' area' || arr[0] == 'area') {
					arr = arr[1].split(',')
					return arr
				}
			}
		}
	},
	created() {
		this.defArea = this.getCookie()
		window.defArea = this.defArea
	},
	mounted() {
		this.defArea = this.getCookie()
		window.defArea = this.defArea
	}
}
</script>
